<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../style/default/jsvm.css"/>
<link rel="stylesheet" type="text/css" href="../../style/default/dashboard.css"/>
<script id="j$vm" src="../../jsvm/jsre.js" ></script>
<script src="../../jsvm/lib/jsre-ui.js" ></script>
<style>

.panel_0 {
    left: 100px;
    top: 100px;
    width: 400px;
    height:300px;
    border: 2px solid red;
    padding: 5px;
    background-color: #CCCCCC;
}

.bt_0{
   width: 60px;
   height: 30px;
   background-color: #FFFFFF;
   border: 1px solid blue;
}

.labButton_0{
    background-color:#CCCCCC;
    color:white;
    cursor:pointer;
    font-weight: bold;
    text-align : center;
    width: 90px;
    height:16px;
}

.card1_0, .card2_0, .card3_0, .card4_0 {
    width: 60px;
    height:60px;
}

.card1_0 {
    left: 0px;
    border: 2px solid red;
}

.card2_0 {
    left: 60px;
    border: 2px solid green;
}

.card3_0 {
    left: 120px;
    border: 2px solid blue;
}

.card4_0 {
    left: 180px;
    border: 2px solid red;
}


.simple {
    position: absolute;
    left: 0px;
    top : 0px;
    width: 100px;
    height: 200px;
    border: 2px solid red;
    padding: 3px;
    margin: 4px;
}

.jsvm_item,
.jsvm_item_0 {
    position: absolute;
    width: 50%;
    height: 22px;
    padding: 2px;
    border: 1px solid blue;
}

.jsvm_item_marker {
    width: 16px;
    height: 16px;
    margin-right: 2px;
}

.jsvm_item_icon {
    width: 16px;
    height: 16px;
    margin-right: 2px;
}

.jsvm_item_label {
    height: 16px;
    line-height: 16px;
    text-overflow:ellipsis;
    overflow:hidden;
}

.jsvm_item_input {
    height: 16px;
    line-height: 16px;
    text-overflow:ellipsis;
    overflow:hidden;
    border: 0px none;
}

.jsvm_item_ctrl {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

</style>
</head>
<body>


</body>


<script type="text/javascript">

J$VM.exec("Demo",function(System){

    this.prefer({theme: "default"});
    
    var item = new js.awt.Item({
        markable: true,
        controlled: true,
        iconImage: "folder.gif",
        labelText: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    }, this);

    item.appendTo(this.view);
    var prefSize = item.getPreferredSize();
    var bounds = item.getBounds();

    System.err.println("prefSize: "+JSON.stringify(prefSize));
    System.err.println("bounds: "+JSON.stringify(bounds));
    item.setWidth(prefSize.width, 3);
    
    //item.doLayout();
    //item.setWidth(200, 3);

});
</script>
</html>
